window._AMapSecurityConfig = {
  securityJsCode: 'ba27be2ac16aa496722783fbfb2020bf',
}

import AMapLoader from '@amap/amap-jsapi-loader'
import { polygonJson, center, townList, boundaryjson } from '@/data/map'

class Map {
  constructor(container, options = {}) {
    this.container = container
    this.options = options
    this.config = {
      bgHover: '#009ad6',
      bg: '#0249c6',
      border: '#03c1d1',
    }

    if (window.AMap == undefined) {
      AMapLoader.load({
        //首次调用 load
        key: '3f7aa1ed270ffb4d10cf26afb0f9c1e7', //首次load key为必填
        version: '2.0',
        plugins: [
          'Map3D',
          'AMap.MarkerClusterer',
          'AMap.MouseTool',
          'AMap.DistrictSearch',
          'AMap.GeoJSON',
          'AMap.MarkerCluster',
          // 'AMap.Object3D',
          // 'AMap.Object3DLayer',
          ,
        ],
        AMapUI: {
          plugins: ['overlay/SimpleMarker'],
        },
      }).then(AMap => {
        this.initMap()
      })
    } else {
      this.initMap()
    }
  }

  initMap() {
    this.createMap()
    this.initDistrictMap()
  }

  createMap() {
    this.map = new AMap.Map(this.container, {
      viewMode: '3D',
      pitch: 30,
      center,
      mapStyle: 'amap://styles/blue',
      zoom: this.options.zoom,
    })
  }

  // 区/县地图初始化
  initDistrictMap() {
    if (this.beforeInitDistrictMap) this.beforeInitDistrictMap()

    this.map.setZoom(this.options.zoom || 11.5)
    this.map.setZooms([8, 20])

    this.map.setMask(boundaryjson) // 遮掩，不显示县以外地区
    this.addTownText() // 添加镇名

    // this.map.setFeatures(['bg'])
    this.map.setFeatures(['bg', 'road', 'building'])
    this.map.setCenter(center)

    this.geoJSON()
  }

  // 添加镇名
  addTownText() {
    const markers = []

    var layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      collision: false,
      allowCollision: false,
    })

    let index = 0
    for (const key in townList) {
      const townItem = townList[key]

      var marker = new AMap.LabelMarker({
        name: townItem.name, // 标识
        position: townItem.center,
        rank: index++,
        text: {
          content: townItem.name, // 文本
          style: {
            fontSize: 11,
            fillColor: '#F5F2F2',
          },
        },
      })

      markers.push(marker)
      layer.add(markers)
      this.map.add(layer)
    }
  }

  // 根据坐标点画边界
  geoJSON() {
    var gjson = new AMap.GeoJSON({
      geoJSON: polygonJson,
      // 还可以自定义getMarker和getPolyline
      getPolygon: (gjson, lnglats) => {
        if (this.beforePolygon) this.beforePolygon(gjson, lnglats)

        // 计算面积
        // var area = AMap.GeometryUtil.ringArea(lnglats[0])

        // 构造多边形对象
        const polygon = new AMap.Polygon({
          path: lnglats,
          strokeColor: this.config.border, // 边框
          strokeWeight: 1,
          // strokeOpacity: 1,
          // fillOpacity: 1,
          fillColor: this.config.bg, // 填充色
          isHotspot: true,
          cursor: 'pointer',
          zIndex: 50,
        })

        if (this.afterCreatePolygon) this.afterCreatePolygon(polygon, gjson, lnglats)

        return polygon
      },
    })
    this.map.add(gjson)
  }

  // 通过搜索添加描边和mask
  addMaskBySearch() {
    // 添加高度面
    // var object3Dlayer = new AMap.Object3DLayer({ zIndex: 100 })
    // map.add(object3Dlayer)
    // var height = -8000
    // var color = '#000'
    // var wall = new AMap.Object3D.Wall({
    //   path: mask,
    //   height: height,
    //   color: color,
    // })
    // wall.transparent = true
    // object3Dlayer.add(wall)

    // 利用行政区查询获取边界构建mask路径
    // 也可以直接通过经纬度构建mask路径
    var district = new AMap.DistrictSearch({
      subdistrict: 3,
      extensions: 'all',
      level: 'city',
    })
    district.search('西华县', (status, result) => {
      var bounds = result.districtList[0].boundaries

      var mask = []
      for (var i = 0; i < bounds.length; i += 1) {
        mask.push([bounds[i]])
      }

      //添加描边
      // for (var i = 0; i < bounds.length; i += 1) {
      //   new AMap.Polyline({
      //     path: bounds[i],
      //     // strokeColor: '#99ffff',
      //     strokeColor: '#3078AC',
      //     strokeWeight: 4,
      //     map: this.map,
      //   })
      // }

      this.map.setMask(mask)
    })
  }

  addLine() {
    geojson.features.map(item => {
      item.geometry.coordinates.map(path => {
        new AMap.Polyline({
          path,
          // strokeColor: '#99ffff',
          strokeColor: '#3078AC',
          strokeWeight: 4,
          map: this.map,
        })
      })
    })
  }
}

export default Map
